<template>
	<div class="app-container">
		<div class="juese">
			<div class="step-title">
			  <el-steps :active="active" align-center finish-status="success">
			    <el-step title="角色信息"></el-step>
			    <el-step title="分配权限"></el-step>
			    <el-step title="确认信息"></el-step>
			  </el-steps>
			</div>
			<div class="one" v-if="active == 0 || active == 2">
				<div class="change">
					<!-- <p>
					  <span>人员</span>
					  <input v-model="tempData.operator" :disabled="active == 2" type="text" placeholder="请选择人员" @focus="checkBuyer" />
					</p> -->
				  <p>
				    <span>角色身份</span>
						<el-select v-model="tempData.roleName" :disabled="active == 2" placeholder="请选择角色身份" class="userselect">
						  <el-option
						    v-for="item in roleArr"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value"
						  ></el-option>
						</el-select>
				    <!-- <input v-model="tempData.roleName" :disabled="active == 2" type="text" placeholder="请输入角色名" /> -->
					</p>
					<p>
					  <span>角色说明</span>
					  <input v-model="tempData.roleDescribe" :disabled="active == 2" type="text" placeholder="请输入角色说明" />
					</p>
				</div>
			</div>
			<div class="two" v-if="active == 1 || active == 2">
				<el-transfer
					filterable
					filter-placeholder="请输入权限"
					v-model="value"
					:props="{
						key: 'value',
						label: 'desc'
					}"
					:titles="['所有权限', '已有权限']"
					:button-texts="['删除', '新增']"
					:data="roledata">
				</el-transfer>
			</div>
			<div class="submits">
			  <div class="save" @click="prev" v-if="active != 0">上一步</div> 
			  <div class="save" @click="next" v-if="active < 2">下一步</div>
			  <div class="save" @click="save" v-else>确认信息</div>
			  <div class="nosave" @click="$router.back(-1)">取消</div>
			</div>
		</div>
		<!-- 采购员弹窗 -->
		<!-- <el-dialog title="采购员" :visible.sync="buyerShow" width="80%">
		  <div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelece" default-active="0">
						<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table 
		          :data="peopleData" 
		          height="400" 
		          highlight-current-row
		          @current-change="handlePeople"
		          style="margin-bottom: 20px;" 
		          :show-header="true" >
							<el-table-column align="center" prop="code" label="编码"></el-table-column>
							<el-table-column align="center" label="头像">
								<template slot-scope="scope">
									<img :src="scope.row.icon" alt="" class="avatar">
								</template>
							</el-table-column>
							<el-table-column align="center" prop="username" label="姓名"></el-table-column>
							<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
							<el-table-column align="center" prop="sex" label="性别"></el-table-column>
							<el-table-column align="center" prop="power" label="职务"></el-table-column>
							<el-table-column align="center" prop="phone" width="120" label="手机号码"></el-table-column>
							<el-table-column align="center" prop="email" label="邮箱"></el-table-column>
							<el-table-column align="center" prop="status" label="状态"></el-table-column>
						</el-table>
						<el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" @prev-click="goPrev" @next-click="goNext" />
					</div>
				</div>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="buyerShow = false">取 消</el-button>
		    <el-button type="primary" @click="buyerShow = false">确 定</el-button>
		  </span>
		</el-dialog> -->
	</div>
</template>

<script>
	import { getUser,getBumen,addRole,addRoleGetid,getUserPermission,updateRolePermission,addRolePermissionCeshi,jueseChaQuanxian } from '@/api/people'
	let cities = [],userid = null;
	export default {
		data() {
		  return {
		    active: 0,
				tempData: '',
				writeOradd: 0,   //0编辑1新增
				value: [],
				roleList: null,
				roledata: null,
				roleArr: [{
					label: '超级管理员',
					value: 'superAdmin'
				},{
					label: '管理员',
					value: 'admin'
				},{
					label: '普通用户',
					value: 'editor'
				},{
					label: '乳酸厂标签用户',
					value: 'rsEditor'
				},{
					label: '乳酸厂标签管理员',
					value: 'rsAdmin'
				},{
					label: '淀粉厂总监级',
					value: 'dfZongjian'
				},{
					label: '淀粉厂仓库管理员',
					value: 'dfAdmin'
				},{
					label: '淀粉厂车间级',
					value: 'dfChejian'
				},{
					label: '淀粉厂维修工',
					value: 'dfEditor'
				},{
					label: '内贸提成管理员',
					value: 'nmAdmin'
				},{
					label: '外贸提成管理员',
					value: 'wmAdmin'
				},{
					label: '投票管理员',
					value: 'tpAdmin'
				}],
				ifydata: [{
				  id: 0,
				  departments: '全部',
				  value: ''
				}],   //部门列表
				peopleData: [],  //人员列表
				buyerShow: false, //采购员弹窗状态
		  }
		},
		mounted() {
			// this.getpeople()
			// this.bumenList()
			this.getPermission()
			if(this.$route.params.options){
				this.writeOradd = 0
				const param = JSON.parse(this.$route.params.options)
				this.tempData = param
				// 如果有参数说明是修改的,需要用修改的id获取当前权限列表
				this.getSelfPer(param.roleId)
			}else{
				this.writeOradd = 1
				this.tempData = {
					roleName: '',
					roleDescribe: ''
				}
			}
		},
		methods:{
			// 获取总权限
			getPermission(){
				getUserPermission({}).then(res => {
					console.log('权限列表')
					console.log(res)
					cities = res.data
					const data = []
					res.data.forEach((role, index) => {
						data.push({
							desc: role.permissionName,
							value: role.permissionId,
						})
					})
					this.roledata = data
				})
			},
			next() {
				// 下一步切换掉对应接口
				if(this.active == 0){
					// 第一步点击判断是修改还是添加角色信息
					if(this.writeOradd == 1){
						// 新增
						if(this.tempData.roleName){
							addRoleGetid(this.tempData).then(res => {
								console.log(res)
								this.$message({
									showClose: true,
									message: res.message,
									type: 'success'
								})
								// 新增完用户,保存id
								userid = res.data.roleId
							})
						}else{
							this.$message({
								showClose: true,
								message: '请输入角色名称',
								type: 'error'
							})
							return
						}
					}
				}else if(this.active == 1){
					console.log(this.value)
					let permission = []
					this.value.map(item => {
						permission.push({
							permissionId: item
						})
					})
					console.log(permission)
					if(this.writeOradd == 0){
						updateRolePermission({roleId: this.tempData.roleId,userPermissions: permission}).then(res => {
							console.log(res)
							this.$message({
								showClose: true,
								message: res.message,
								type: 'success'
							})
						})
					}else{
						addRolePermissionCeshi({roleId: userid,userPermissions: permission}).then(res => {
							console.log(res)
							this.$message({
								showClose: true,
								message: res.message,
								type: 'success'
							})
						})
						// addRolePermission({roleId: userid,permissionId: permission}).then(res => {
						// 	console.log(res)
						// 	this.$message({
						// 		showClose: true,
						// 		message: res.message,
						// 		type: 'success'
						// 	})
						// })
					}
				}
				this.active++
			  // if (this.active++ > 2) {
			  //   this.active = 0;
			  // }
			},
			prev() {
			  if (this.active-- < 1) {
			    this.active = 0;
			  }
			},
			// // 人员列表
			// getpeople(id){
			//   console.log('id:',id)
			//   getUser({departments: id}).then(res => {
			//     console.log(res)
			//     this.peopleData = res.data.list
			//   })
			// },
			// // 部门列表
			// bumenList(){
			//   getBumen({}).then(res => {
			//     console.log(res)
			//     res.data.map(item => {
			// 			item.value = item.departments
			// 			return item
			// 		})
			// 		this.ifydata = [this.ifydata[0],...res.data]
			//   })
			// },
			// // 选择人员分类
			// handleSelece(index){
			// 	console.log(index)
			// 	console.log('ifydata:',this.ifydata[index])
			// 	const navindex = this.ifydata[index].value ? this.ifydata[index].value : null
			// 	this.getpeople(navindex)
			// },
			// // 选择采购员
			// checkBuyer() {
			//   this.buyerShow = true;
			// },
			// // 选择操作人员
			// handlePeople(row){
			//   console.log(row)
			//   this.tempData.operator = row.username
			// 	this.tempData.userId = row.userId
			//   console.log(this.tempData.buyer)
			// 	this.buyerShow = false
			// },
			save(){
				this.$router.go(-1)
			},
			nosave(){
				this.$router.back(-1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.juese{
		padding: 20px;
		background-color: #fff;
	}
	.submits {
	  display: flex;
	  padding: 20px 20px 0 20px;
		margin-top: 20px;
		border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
	.two{
		display: flex;
		justify-content: center;
		padding: 20px 0;
	}
	.files {
	  display: flex;
	  background: #fff;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  border-radius: 8px;
	  margin-top: 20px;
	  overflow: hidden;
	  padding: 20px;
	}
	.files-btm .btn-prev:after {
	  content: "上一页";
	}
	.files-btm .btn-next:before {
	  content: "下一页";
	}
	.files-btm .btn-prev,
	.files-btm .btn-next {
	  width: 65px;
	}
	.files-left {
		width: 160px;
		margin-right: 20px;
		/deep/.el-menu{
			border-right: none;
		}
		/deep/.el-menu-item{
			height: 35px;
			line-height: 35px;
			margin-bottom: 8px;
		}
		/deep/.el-menu-item.is-active{
			color: #fff;
			border-radius: 5px;
			background: rgba(24,160,94,.8);
		}
	}
	.files-right {
	  flex: 1;
	  overflow: hidden;
	}
	.files-btm {
	  background: rgba(255, 255, 255, 1);
	  border-radius: 8px;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  // margin-top: 20px;
	  overflow: hidden;
	  &-title {
	    display: flex;
	    align-items: center;
	    height: 45px;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	    background: #ffffff;
	    > p {
	      text-align: center;
	      font-size: 16px;
	      color: #333;
	    }
	  }
	  .addDate {
	    margin: 20px 32px 10px 32px;
	    height: 32px;
	    border-radius: 3px;
	    text-align: center;
	    line-height: 32px;
	    font-size: 14px;
	    color: #333;
	    cursor: pointer;
	    border: 1px dashed rgba(0, 0, 0, 0.3);
	  }
	  .el-button--text {
	    margin: 0 15px;
	  }
	}
	.avatar{
		width: 30px;
		height: 30px;
	}
</style>
